<template>
    <div>
        <el-row style="margin-top: 20px" class="alignRight">
            <el-col class="alignRight" :span="12">
                消费金额：
            </el-col>
            <el-col class="alignLeft" :span="12">
                ￥{{this.$store.state.invoiceStore.totalPrice}}
            </el-col>
        </el-row>
        <el-row v-show="haveNumber" style="margin-top: 20px">
            <el-col class="alignRight" :span="12">
                账户余额：
            </el-col>
            <el-col class="alignLeft" :span="12">
                ￥{{this.$store.state.invoiceStore.money}}
            </el-col>
        </el-row>
        <el-row v-if="this.$store.state.invoiceStore.number"
                style="margin-top: 50px;text-align: center">
            <el-button type="primary" class="buttonSize"
                       @click="addMoneyChecked">充值
            </el-button>
        </el-row>
        <el-row style="margin-top: 50px;text-align: center">
            <el-radio-group v-model="radio" @change="changePayWay">
                <el-radio :label="1">支付宝</el-radio>
                <el-radio :label="2">微信</el-radio>
                <el-radio :label="3">现金</el-radio>
                <el-radio :label="4" v-show="haveNumber">账户余额</el-radio>
            </el-radio-group>

        </el-row>
        <el-row style="margin-top: 50px;text-align: center">
            <el-button type="primary" class="buttonSize"
                       @click="invoBuyOrder">结账
            </el-button>
        </el-row>
        <el-dialog
                title="会员充值"
                :visible.sync="addMoneyDialogVisible"
                width="30%"
                :close-on-click-modal='false'
                center>
            <el-row type="flex" align="middle" style="margin-top: 20px">
                <el-col :span="10" align="right">
                    <label>电话：</label>

                </el-col>
                <el-col :span="12">
                    <el-input
                            disabled=""
                            style="width: 150px"
                            size="medium"
                            v-model="tel"
                            placeholder="电话号码">

                    </el-input>
                </el-col>
            </el-row>
            <el-row type="flex" align="middle" style="margin-top: 20px">
                <el-col :span="10" align="right">
                    <label for="addMoneyNum">充值金额：</label>
                </el-col>
                <el-col :span="12">
                    <el-input
                            id="addMoneyNum"
                            style="width: 150px"
                            size="medium"
                            v-model="addMoneyNum"
                            placeholder="请输入金额">

                    </el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addMoneyDialogVisible = false" size="medium">取 消</el-button>
    <el-button type="primary" @click="addMoneyCommit" size="medium">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "invoBuyOrder",
        computed: {
            tel() {
                return this.$store.state.invoiceStore.number;
            },
            haveNumber() {
                return this.$store.state.invoiceStore.number;
            },
            radio: {
                get: function () {
                    return this.checkedRadio


                },
                set: function (val) {
                    this.checkedRadio = val
                }

            },
        },
        created() {
            if (this.$store.state.invoiceStore.number && this.$store.state.invoiceStore.money < this.$store.state.invoiceStore.totalPrice) {
                /*查询会员number，在充值界面显示部分信息*/
            }
            if (this.$store.state.invoiceStore.number) {
                this.checkedRadio = 4
                console.log('this.checkedRadio=4');

            } else {
                this.checkedRadio = 1
                console.log(' this.checkedRadio=1');

            }
        },
        data() {
            return {
                checkedRadio: 2,
                name: '',
                number: '',
                score: '',
                idCard: '',
                addMoneyDialogVisible: false,
                addMoneyNum: "",

            }
        },
        methods: {
            ...mapActions(['invoBuyOrderSt', 'getTime', 'userOperation', 'choosePayType', 'buyOrderSt', 'frontAddMoneyCommit']),

            changePayWay(val) {
                // console.log(val);
                this.choosePayType(val)
            },
            openFailedAlert() {
                this.$message({
                    message: '支付失败',
                    center: true
                });
            },
            openSeccessAlert() {
                this.$message({
                    message: '支付成功',
                    center: true,
                    type: 'success',
                });
            },
            invoBuyOrder() {
                // console.log(this.number);
                // console.log(this.$store.state.invoiceStore);
                let obj = {
                    mainId: this.$store.state.invoiceStore.mainId,
                    number: this.$store.state.invoiceStore.number,
                    totalPrice: this.$store.state.invoiceStore.totalPrice,
                    payType: this.$store.state.invoiceStore.payType,
                    money: this.$store.state.invoiceStore.money
                };
                if (this.$store.state.invoiceStore.number) {
                    this.invoBuyOrderSt(obj).then(res => {
                        console.log('invoBuyOrderSt');

                        if (res.code === 200) {
                            console.log(res.Text);
                            this.openSeccessAlert()
                            this.$router.push('/front/invoicing/invoBuyOrder')
                        } else {
                            this.openFailedAlert()
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    this.buyOrderSt(obj).then(res => {
                        console.log('buyOrderSt');
                        if (res.Code === 200) {
                            console.log(res);
                            this.openSeccessAlert()
                            this.$router.push('/front/invoicing/invoBuyOrder')
                        } else {
                            this.openFailedAlert()
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }


            },
            addMoneyChecked() {
                this.addMoneyNum = '';
                this.addMoneyDialogVisible = true;
            },
            addMoneyCommit() {
                let obj = {number: this.$store.state.invoiceStore.number, money: this.addMoneyNum}
                this.frontAddMoneyCommit(obj).then(resp => {
                    if (resp.code === 200) {
                        this.getTime(); //更新时间
                        let obj = {
                            userName: this.$store.state.user.userName,
                            operationDate: this.$store.state.nowTime.time,
                            operationMessage: '前台会员充值',
                        }
                        this.userOperation(obj);
                        this.addMoneyDialogVisible = false
                        this.$message({
                            message: '充值成功',
                            type: 'success',
                            center: true
                        })
                    } else {
                        this.$message({
                            message: '充值失败',
                            center: true
                        })
                    }
                }).catch(err => {
                    this.$message({
                        message: '充值失败',
                        center: true
                    })
                    console.log(err);
                })
            },
        },
    }
</script>

<style scoped>
    .alignLeft {
        text-align: left;
    }

    .alignRight {
        text-align: right;
    }

    .myInput {
        width: 150px;
    }

    .buttonSize {
        height: 30px;
        width: 100px;
        padding: 0;
    }
</style>